<template>
  <div>
    <van-grid :border="false" :column-num="5" class="van-grid">
      <van-grid-item
        v-for="(item, index) in ServiceLsit"
        :key="item.id"
        @click="gotoDetails(index)"
        class="van-grid-item"
      >
        <van-image
          :src="'http://124.93.196.45:10001/' + item.imgUrl"
          v-show="item.imgUrl"
          width="50"
          height="50"
        />
        <van-image
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fd00.paixin.com%2Fthumbs%2F1853861%2F41585997%2Fstaff_1024.jpg&refer=http%3A%2F%2Fd00.paixin.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671681094&t=080902cf7ef82e5e0fbf7328e7fd570a"
          v-show="!item.imgUrl"
          width="50"
          height="50"
        />
        <span>{{ item.serviceName }}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
export default {
  props: ["ServiceLsit"],
  methods: {
    gotoDetails(i) {
      if (i == this.ServiceLsit.length - 1) {
        this.$router.push("/Service");
      } else {
        const item = this.ServiceLsit[i];
        console.log(item);
        this.$router.push(item.link);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.van-grid {
  width: 375px;
  margin-top: 5px;
  .van-grid-item {
    height: 80px;
  }
  span {
    font-size: 14px;
    padding-top: 2px;
  }
}
</style>
